import 'dart:convert';
import 'dart:io';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_app/views/car.dart';
import 'package:flutter_app/widget/page_route_anim.dart';
import 'package:image_picker/image_picker.dart';

class CardList extends StatefulWidget {
  @override
  _CardList createState() => _CardList();
}

class _CardList extends State<CardList> {
  File _image;
  PickedFile pickedFile;

  // 去新页面
  goto() async{
    List bytes =await pickedFile.readAsBytes();
    String bs64 = base64Encode(bytes);
    Navigator.of(context).push(SlidingAroundRoute(Car(bs64:bs64)));

  }
  //  弹出框
  _showDialog(BuildContext cxt){
    showCupertinoModalPopup<int>(context: cxt, builder:(cxt){
      return CupertinoActionSheet(
        title: Text("请选择"),
        message: Text('选择照片或拍摄'),
        cancelButton: CupertinoActionSheetAction(onPressed: (){
          Navigator.pop(cxt,0);
        }, child: Text("取消")),
        actions: <Widget>[
          CupertinoActionSheetAction(onPressed: (){
            showImagePicker(1);
            Navigator.pop(cxt,1);

          }, child: Text('相机')),

          CupertinoActionSheetAction(onPressed: (){
            showImagePicker(2);
            Navigator.pop(cxt,2);
          }, child: Text('相册')),
        ],
      );
    });
  }
  // 调用摄像头
  showImagePicker(type) async{
    final _picker = ImagePicker();

    pickedFile = await _picker.getImage(source: type ==1?ImageSource.camera: ImageSource.gallery);

    setState(() {
      if (pickedFile != null) {
        _image = File(pickedFile.path);
      } else {
        print('No image selected.');
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Container(
        margin:EdgeInsets.only(top:15, left:15, right: 15, bottom: 30),
        child: Column(
          children: [
            InkWell(
                onTap: (){
                  _showDialog(context);
                },
                child: Center(
                  child: _image == null
                      ? noImage(context)
                      : fullImage(context),
                )
            ),
            Row(
                children: [Text('1.确保从正面对准车牌拍照')]
            ),
            Row(
                children: [Text('2.确保车牌照片清晰')]
            ),
            Row(
              children: [
                Container(
                  width: 300.0,
                  height: 300.0,
                  margin: EdgeInsets.only(top: 10.0, bottom: 10.0, left: 15.0),
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    image: DecorationImage(
                      image: AssetImage('assets/images/car.jpg'),
                    ),
                  ),
                ),
              ],
            )
          ],
        ),
      )
    );

  }

  Widget noImage(BuildContext context) {
    return Container(
        margin: EdgeInsets.only(bottom: 30.0),
        height: 200,
        decoration: BoxDecoration(
          border: new Border.all(width: 1.0, color: Colors.grey),
          borderRadius: new BorderRadius.all(new Radius.circular(20.0)),
        ),
        child: Align(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              IconButton(icon: Icon(Icons.add_photo_alternate), onPressed: null),
              Text('拍摄或上传车牌照片')
            ],
          ),
        )
    );
  }

  Widget fullImage(BuildContext context) {
    return Column(
      children: [
        Container(
          margin:EdgeInsets.only(bottom: 30),
          child: Image.file(_image)
        ),
        Container(
          width: double.infinity,
          child: RaisedButton(
              color: Colors.blueAccent,
              child: Text("上传",style: TextStyle(fontSize: 16.0,color: Colors.white)),
              shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10.0)),
              onPressed: (){
                goto();
              }
          ),
        ),
        Container(
            margin:EdgeInsets.only(bottom: 30),
        ),
      ],
    );
  }
}
